<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>MVVM模式</title>
  <script src="jQuery.js"></script>
</head>
<body>
  <div>
    <input type="text" id="input"/>
    <button id='btn'>提交</button>
    <ul id="ul"></ul>
  </div>

  <script>
    // MVP 设计模式
    // 传统方式实现：(使用面向对象编写的一段jquery代码)
    function Page() {

    }
    
    // $.extend() 将一个或多个对象的内容合并到目标对象。
    // 原型扩展
    $.extend(Page.prototype, {
      // 初始化
      init: function() {
        this.bindEvents()
      },
      // 绑定事件
      bindEvents: function() {
        var btn = $('#btn');
        // 将handleClick函数绑在this--指代Page实例的引用
        btn.on('click', $.proxy(this.handleClick, this))
      },
      // 事件定义
      handleClick: function() {
        // alert('2222')
        var ul = $('#ul');
        var input = $('#input');
        var inputVal = input.val()
        // 往ul中添加节点li
        ul.append('<li>' + inputVal + '</li>');
        // 将input框的内容清空
        input.val('');
      }
    });

    // 创建page实例，调用函数
    var page = new Page();
    page.init();
  </script>
</body>
</html>